<template>
  <view class="newClass last-lession sizing home-panel">
    <view class="panel-header">
      <text class="panel-header--title">最新课程</text>
    </view>
    <view class="panel-content">
      <view class="last-lession-box">
        <homeLession
          v-for="(item, index) in list"
          :key="index"
          :lessonId="item.lessonId"
          :lessonPicPath="item.lessonPicPath"
          :lessonName="item.lessonName"
          :lecturePic="item.lecturePic"
          :lecturerName="item.lecturerName"
          :lessonPrice="item.lessonPrice"
          :clickNum="item.clickNum"
          :subNum="item.subNum"
          :isVipLesson="item.isVipLesson"
          :lessonCheapPrice="item.lessonCheapPrice"
        ></homeLession>
      </view>
      <view class="panel-footer">
        <div class="panel-footer--box">
          <view class="panel-footer--btn" @click="handleClickGotoLession">查看更多课程</view>
          <view class="panel-footer--btn lookMoreTip" @click="handleClickReload">
            <image class="panel-footer--btn-image" src="/static/images/home/huanyipi.png" alt />换一批
          </view>
        </div>
      </view>
    </view>
  </view>
</template>

<script>
import { selectLessonByName } from "api/order/lession.js";
import homeLession from "@/components/business/lession/lession-row.vue";

export default {
  name: "HomeLastLession",
  components: {
    homeLession
  },
  props: {},
  data() {
    return {
      list: [],
      page: {
        currentPage: 1,
        pageNumber: 6,
        totalNumber: 0,
        totalPage: 1
      }
    };
  },
  created() {
    this.loadRecommended();
  },
  mounted() {},
  methods: {
    handleClickGotoLession() {
      this.$router.push({
        path: `/lession`,
        query: {
          sid: this.$route.query.sid
        }
      });
    },
    // 重新加载一批数据
    handleClickReload() {
      // 处理当前页 如果小于最大页数则增加 否则变成第一页
      if (this.page.currentPage >= this.page.totalPage) {
        this.page.currentPage = 1;
      } else {
        this.page.currentPage++;
      }
      this.loadRecommended();
    },
    // 加载推荐的课程
    loadRecommended() {
      var params = {
        page: this.page,
        newFlag: "Y"
      };
      var self = this;
      selectLessonByName(params).then(({ respCode, respMsg, result }) => {
        if (respCode !== "0") {
          // 加载失败
          this.isloading = false;
          this.$toast.fail(respMsg);
          return;
        }
        self.list = result.list.slice(0, 6);
        this.page.totalPage = result.page.totalPage;
      });
    }
  }
};
</script>
<style lang="scss">
.last-lession {
  .last-lession-box {
    .box-item {
      position: relative;
      .last-lession-up {
        display: flex;
        justify-content: flex-start;
        .last-lession-image {
          width: 3.84rem;
          height: 2.16rem;
          background-color: #aeafc0;
          img {
            width: 100%;
            height: 100%;
            border-radius: 8px;
          }
        }
        .last-lession-name {
          width: calc(100% - 4.12rem);
          margin-left: 0.28rem;
          .last-lession-desc {
            font-size: 0.427rem;
            color: #2c2c35;
            line-height: 1.4;
            width: 4.24rem;
          }
          .last-lession-teacher {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 0.4rem;

            .teacher-image {
              display: flex;
              align-items: center;
              .teacher-avatar > img {
                width: 40px;
                height: 40px;
                border-radius: 50%;
              }
              span {
                color: #2c2c35;
                font-size: 0.32rem;
                display: inline-block;
                margin-left: 0.066667rem;
              }
              div {
                vertical-align: middle;
                display: inline-block;
                width: 0.533rem;
                height: 0.533rem;
                border-radius: 50%;
                text-align: right;
                background-color: #aeafc0;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
            }
            .jieshu {
              color: #2c2c35;
              font-size: 0.32rem;
            }
          }
        }
      }
      .last-lession-down {
        padding: 0.427rem 0;
        display: flex;
        justify-content: space-between;
        .xuexi {
          color: #aeafc0;
          font-size: 0.32rem;
        }
        .count {
          color: #f54305;
          font-size: 0.4rem;
        }
      }
    }
    .box-item + .box-item {
      margin-top: 0.32rem;
    }
    .box-item::after {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      content: "";
      width: 100%;
      height: 1px;
      border-bottom: 1px solid #f6f6fb;
    }
    .box-item:last-child::after {
      border-bottom: none;
    }
  }
}
</style>
